<template>
  <div class="right-board">
    <ElTabs v-model="currentTab" class="center-tabs">
      <ElTabPane label="组件属性" name="field" />
      <ElTabPane label="表单属性" name="form" />
    </ElTabs>
    <div class="field-box">
      <ElScrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <ElForm
          v-show="currentTab === 'field' && showField"
          size="small"
          label-width="70px"
          :style="{ width: '95%' }"
        >
          <ElFormItem v-if="localActiveData.vModel !== undefined" label="字段名">
            <ElInput
              v-model="localActiveData.vModel"
              placeholder="请输入字段名（v-model）"
            />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.componentName !== undefined" label="组件名">
            {{ localActiveData.componentName }}
          </ElFormItem>
          <ElFormItem v-if="localActiveData.label !== undefined" label="标题">
            <ElInput v-model="localActiveData.label" placeholder="请输入标题" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.placeholder !== undefined" label="占位提示">
            <ElInput v-model="localActiveData.placeholder" placeholder="请输入占位提示" />
          </ElFormItem>
          <ElFormItem
            v-if="localActiveData['start-placeholder'] !== undefined"
            label="开始占位"
          >
            <ElInput
              v-model="localActiveData['start-placeholder']"
              placeholder="请输入占位提示"
            />
          </ElFormItem>
          <ElFormItem
            v-if="localActiveData['end-placeholder'] !== undefined"
            label="结束占位"
          >
            <ElInput
              v-model="localActiveData['end-placeholder']"
              placeholder="请输入占位提示"
            />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.span !== undefined" label="表单栅格">
            <ElSlider
              v-model="localActiveData.span"
              :max="24"
              :min="1"
              :marks="{ 12: '' }"
              @change="spanChange"
            />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.layout === 'rowFormItem'" label="栅格间隔">
            <ElInputNumber
              v-model="localActiveData.gutter"
              :min="0"
              placeholder="栅格间隔"
            />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.layout === 'rowFormItem'" label="布局模式">
            <ElRadioGroup v-model="localActiveData.type">
              <ElRadioButton label="default" />
              <ElRadioButton label="flex" />
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem
            v-if="
              localActiveData.justify !== undefined && localActiveData.type === 'flex'
            "
            label="水平排列"
          >
            <ElSelect
              v-model="localActiveData.justify"
              placeholder="请选择水平排列"
              :style="{ width: '100%' }"
            >
              <ElOption
                v-for="(item, index) in justifyOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </ElSelect>
          </ElFormItem>
          <ElFormItem
            v-if="localActiveData.align !== undefined && localActiveData.type === 'flex'"
            label="垂直排列"
          >
            <ElRadioGroup v-model="localActiveData.align">
              <ElRadioButton label="top" />
              <ElRadioButton label="middle" />
              <ElRadioButton label="bottom" />
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem v-if="localActiveData.labelWidth !== undefined" label="标签宽度">
            <ElInput
              v-model.number="localActiveData.labelWidth"
              type="number"
              placeholder="请输入标签宽度"
            />
          </ElFormItem>

          <ElFormItem v-if="localActiveData.vModel !== undefined" label="默认值">
            <ElInput
              :value="setDefaultValue(localActiveData.defaultValue)"
              placeholder="请输入默认值"
              @input="onDefaultValueInput"
            />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.tag === 'el-checkbox-group'" label="至少应选">
            <ElInputNumber
              :value="localActiveData.min"
              :min="0"
              placeholder="至少应选"
              @input="localActiveData.min = $event ? $event : undefined"
            />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.tag === 'el-checkbox-group'" label="最多可选">
            <!-- <ElInputNumber
              :value="localActiveData.max"
              :min="0"
              placeholder="最多可选"
              @input="$set(localActiveData, 'max', $event ? $event : undefined)"
            /> -->
          </ElFormItem>

          <ElFormItem v-if="localActiveData.tag === 'el-cascader'" label="选项分隔符">
            <ElInput v-model="localActiveData.separator" placeholder="请输入选项分隔符" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.min !== undefined" label="最小值">
            <ElInputNumber v-model="localActiveData.min" placeholder="最小值" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.max !== undefined" label="最大值">
            <ElInputNumber v-model="localActiveData.max" placeholder="最大值" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.step !== undefined" label="步长">
            <ElInputNumber v-model="localActiveData.step" placeholder="步数" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.tag === 'ElInputNumber'" label="精度">
            <ElInputNumber
              v-model="localActiveData.precision"
              :min="0"
              placeholder="精度"
            />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.tag === 'ElInputNumber'" label="按钮位置">
            <ElRadioGroup v-model="localActiveData['controls-position']">
              <ElRadioButton label=""> 默认 </ElRadioButton>
              <ElRadioButton label="right"> 右侧 </ElRadioButton>
            </ElRadioGroup>
          </ElFormItem>
          <ElFormItem
            v-if="localActiveData['active-text'] !== undefined"
            label="开启提示"
          >
            <ElInput
              v-model="localActiveData['active-text']"
              placeholder="请输入开启提示"
            />
          </ElFormItem>
          <ElFormItem
            v-if="localActiveData['inactive-text'] !== undefined"
            label="关闭提示"
          >
            <ElInput
              v-model="localActiveData['inactive-text']"
              placeholder="请输入关闭提示"
            />
          </ElFormItem>
          <ElFormItem v-if="localActiveData['active-value'] !== undefined" label="开启值">
            <ElInput
              :value="setDefaultValue(localActiveData['active-value'])"
              placeholder="请输入开启值"
              @input="onSwitchValueInput($event, 'active-value')"
            />
          </ElFormItem>
          <ElFormItem
            v-if="localActiveData['inactive-value'] !== undefined"
            label="关闭值"
          >
            <ElInput
              :value="setDefaultValue(localActiveData['inactive-value'])"
              placeholder="请输入关闭值"
              @input="onSwitchValueInput($event, 'inactive-value')"
            />
          </ElFormItem>
          <ElFormItem
            v-if="
              localActiveData.type !== undefined &&
              'el-date-picker' === localActiveData.tag
            "
            label="时间类型"
          >
            <ElSelect
              v-model="localActiveData.type"
              placeholder="请选择时间类型"
              :style="{ width: '100%' }"
              @change="dateTypeChange"
            >
              <ElOption
                v-for="(item, index) in dateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
              />
            </ElSelect>
          </ElFormItem>

          <ElFormItem
            v-if="localActiveData.buttonText !== undefined"
            v-show="'picture-card' !== localActiveData['list-type']"
            label="按钮文字"
          >
            <ElInput v-model="localActiveData.buttonText" placeholder="请输入按钮文字" />
          </ElFormItem>
          <ElFormItem
            v-if="localActiveData['range-separator'] !== undefined"
            label="分隔符"
          >
            <ElInput
              v-model="localActiveData['range-separator']"
              placeholder="请输入分隔符"
            />
          </ElFormItem>
          <ElFormItem
            v-if="localActiveData['picker-options'] !== undefined"
            label="时间段"
          >
            <ElInput
              v-model="localActiveData['picker-options'].selectableRange"
              placeholder="请输入时间段"
            />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.format !== undefined" label="时间格式">
            <ElInput
              :value="localActiveData.format"
              placeholder="请输入时间格式"
              @input="setTimeValue($event, activeData.type)"
            />
          </ElFormItem>
          <template
            v-if="
              ['el-checkbox-group', 'el-radio-group', 'el-select'].indexOf(
                localActiveData.tag
              ) > -1
            "
          >
            <ElDivider>选项</ElDivider>
            <draggable
              :list="localActiveData.options"
              :animation="340"
              group="selectItem"
              handle=".option-drag"
            >
              <template #item="{ element, index }">
                <div :key="index" class="select-item">
                  <div class="select-line-icon option-drag">
                    <Icon icon="ep:operation" />
                    <!-- <i class="el-icon-s-operation" /> <el-icon><CirclePlus /></el-icon>-->
                  </div>
                  <ElInput
                    style="margin: 0 10px"
                    v-model="element.label"
                    placeholder="选项名"
                    size="small"
                  />
                  <ElInput
                    placeholder="选项值"
                    size="small"
                    :value="element.value"
                    @input="setOptionValue(element, $event)"
                  />
                  <div
                    class="close-btn select-line-icon"
                    @click="localActiveData.options.splice(index, 1)"
                  >
                    <Icon icon="ep:delete" />
                  </div>
                </div>
              </template>
            </draggable>
            <div style="margin-left: 20px">
              <ElButton style="padding-bottom: 0" type="text" @click="addSelectItem">
                <Icon icon="ep:plus" :size="13" />
                添加选项
              </ElButton>
            </div>
            <ElDivider />
          </template>
          <ElFormItem v-if="localActiveData['allow-half'] !== undefined" label="允许半选">
            <el-switch v-model="localActiveData['allow-half']" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData['show-text'] !== undefined" label="辅助文字">
            <el-switch v-model="localActiveData['show-text']" @change="rateTextChange" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData['show-score'] !== undefined" label="显示分数">
            <el-switch
              v-model="localActiveData['show-score']"
              @change="rateScoreChange"
            />
          </ElFormItem>
          <ElFormItem
            v-if="localActiveData['show-stops'] !== undefined"
            label="显示间断点"
          >
            <el-switch v-model="localActiveData['show-stops']" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.range !== undefined" label="范围选择">
            <el-switch v-model="localActiveData.range" @change="rangeChange" />
          </ElFormItem>

          <ElFormItem
            v-if="localActiveData['show-word-limit'] !== undefined"
            label="输入统计"
          >
            <el-switch v-model="localActiveData['show-word-limit']" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.tag === 'ElInputNumber'" label="严格步数">
            <el-switch v-model="localActiveData['step-strictly']" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.clearable !== undefined" label="能否清空">
            <el-switch v-model="localActiveData.clearable" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.showTip !== undefined" label="显示提示">
            <el-switch v-model="localActiveData.showTip" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.multiple !== undefined" label="多选文件">
            <el-switch v-model="localActiveData.multiple" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.readonly !== undefined" label="是否只读">
            <el-switch v-model="localActiveData.readonly" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.disabled !== undefined" label="是否禁用">
            <el-switch v-model="localActiveData.disabled" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.tag === 'ElSelect'" label="是否可搜索">
            <el-switch v-model="localActiveData.filterable" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.tag === 'ElSelect'" label="是否多选">
            <el-switch v-model="localActiveData.multiple" @change="multipleChange" />
          </ElFormItem>
          <ElFormItem v-if="localActiveData.required !== undefined" label="是否必填">
            <el-switch v-model="localActiveData.required" />
          </ElFormItem>
        </ElForm>
        <!-- <--表单属性 -->
        <ElForm v-show="currentTab === 'form'" size="small" label-width="70px">
          <ElFormItem label="表单名">
            <ElInput v-model="localFormConf.formRef" placeholder="请输入表单名（ref）" />
          </ElFormItem>
          <ElFormItem label="表单模型">
            <ElInput v-model="localFormConf.formModel" placeholder="请输入数据模型" />
          </ElFormItem>
          <ElFormItem label="校验模型">
            <ElInput v-model="localFormConf.formRules" placeholder="请输入校验模型" />
          </ElFormItem>
          <ElFormItem label="表单尺寸">
            <ElRadioGroup v-model="localFormConf.size">
              <ElRadioButton label="default"> 中等 </ElRadioButton>
              <ElRadioButton label="small"> 较小 </ElRadioButton>
              <ElRadioButton label="mini"> 迷你 </ElRadioButton>
            </ElRadioGroup>
          </ElFormItem>
          <!-- <ElFormItem label="标签对齐">
            <ElRadioGroup v-model="localFormConf.labelPosition">
              <ElRadioButton label="left"> 左对齐 </ElRadioButton>
              <ElRadioButton label="right"> 右对齐 </ElRadioButton>
              <ElRadioButton label="top"> 顶部对齐 </ElRadioButton>
            </ElRadioGroup>
          </ElFormItem> -->
          <!-- <ElFormItem label="标签宽度">
            <ElInputNumber v-model="localFormConf.labelWidth" placeholder="标签宽度" />
          </ElFormItem> -->
          <!-- <ElFormItem label="栅格间隔">
            <ElInputNumber v-model="localFormConf.gutter" :min="0" placeholder="栅格间隔" />
          </ElFormItem> -->
          <ElFormItem label="禁用表单">
            <el-switch v-model="localFormConf.disabled" />
          </ElFormItem>
          <ElFormItem label="表单按钮">
            <el-switch v-model="localFormConf.formBtns" />
          </ElFormItem>
        </ElForm>
      </ElScrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Icon } from "@/components/Icon";
import draggable from "vuedraggable";
import { isNumberStr } from "@/utils/index";
import {
  ElDivider,
  ElInputNumber,
  ElRadioButton,
  ElRadioGroup,
  ElSlider,
  ElInput,
  ElOption,
  ElSelect,
  ElFormItem,
  ElTabPane,
  ElTabs,
  ElScrollbar,
  ElForm,
  ElButton,
} from "element-plus";
import { computed, ref, watch } from "vue";

const dateTimeFormat = {
  date: "YYYY-MM-DD",
  month: "YYYY-MM",
  year: "YYYY",
  datetime: "YYYY-MM-DD HH:mm:ss",
  daterange: "YYYY-MM-DD",
  monthrange: "YYYY-MM",
  datetimerange: "YYYY-MM-DD HH:mm:ss",
};
const currentTab = ref("field");
const dateTypeOptions = [
  {
    label: "日(date)",
    value: "date",
  },
  {
    label: "月(month)",
    value: "month",
  },
  {
    label: "年(year)",
    value: "year",
  },
  {
    label: "日期时间(datetime)",
    value: "datetime",
  },
];
const dateRangeTypeOptions: any = [
  {
    label: "日期范围(daterange)",
    value: "daterange",
  },
  {
    label: "月范围(monthrange)",
    value: "monthrange",
  },
  {
    label: "日期时间范围(datetimerange)",
    value: "datetimerange",
  },
];

const justifyOptions = [
  {
    label: "start",
    value: "start",
  },
  {
    label: "end",
    value: "end",
  },
  {
    label: "center",
    value: "center",
  },
  {
    label: "space-around",
    value: "space-around",
  },
  {
    label: "space-between",
    value: "space-between",
  },
];

const props = defineProps({
  showField: {
    type: Object as any,
    default: () => null,
  },
  activeData: {
    type: Object as any,
    default: () => {},
  },
  formConf: {
    type: Object as any,
    default: () => {},
  },
});
// 创建 localActiveData 的本地副本
const localActiveData = ref(JSON.parse(JSON.stringify(props.activeData)));

// 创建 formConf 的本地副本
const localFormConf = ref(JSON.parse(JSON.stringify(props.formConf)));
// 当props变化时更新本地副本
watch(
  () => props.activeData,
  (newVal) => {
    localActiveData.value = JSON.parse(JSON.stringify(newVal));
  },
  { deep: true }
);

watch(
  () => props.formConf,
  (newVal) => {
    localFormConf.value = JSON.parse(JSON.stringify(newVal));
  },
  { deep: true }
);
const dateOptions = computed<any[]>(() => {
  if (
    localActiveData.value.type !== undefined &&
    localActiveData.value.tag === "el-date-picker"
  ) {
    return localActiveData.value["start-placeholder"] === undefined
      ? dateTypeOptions
      : dateRangeTypeOptions;
  }
  return [];
});
function addSelectItem() {
  localActiveData.value.options.push({
    label: "",
    value: "",
  });
}
function setOptionValue(item, val) {
  item.value = isNumberStr(val) ? +val : val;
}
function setDefaultValue(val) {
  if (Array.isArray(val)) {
    return val.join(",");
  }
  if (["string", "number"].indexOf(val) > -1) {
    return val;
  }
  if (typeof val === "boolean") {
    return `${val}`;
  }
  return val;
}
function onDefaultValueInput(str) {
  if (Array.isArray(localActiveData.value.defaultValue)) {
    localActiveData.value.defaultValue = str
      .split(",")
      .map((val: string | number) => (isNumberStr(val) ? +val : val));
  } else if (["true", "false"].indexOf(str) > -1) {
    // 布尔
    localActiveData.value.defaultValue = JSON.parse(str);
  } else {
    // 字符串和数字
    localActiveData.value.defaultValue = isNumberStr(str) ? +str : str;
  }
}
function onSwitchValueInput(val, name) {
  if (["true", "false"].indexOf(val) > -1) {
    localActiveData.value[name] = JSON.parse(val);
  } else {
    localActiveData.value[name] = isNumberStr(val) ? +val : val;
  }
}
function setTimeValue(val: string, type?: string) {
  const valueFormat = type === "week" ? dateTimeFormat.date : val;
  localActiveData.value.defaultValue = null;
  localActiveData.value["value-format"] = valueFormat;
  localActiveData.value.format = val;
}
function spanChange(val) {
  localFormConf.value.span = val;
}
function multipleChange(val) {
  localActiveData.value.defaultValue = val ? [] : "";
}
function dateTypeChange(val) {
  console.log(dateTimeFormat[val], val);

  setTimeValue(dateTimeFormat[val], val);
}
function rangeChange(val) {
  localActiveData.value.defaultValue = val
    ? [localActiveData.value.min, localActiveData.value.max]
    : localActiveData.value.min;
}
function rateTextChange(val) {
  if (val) localActiveData.value["show-score"] = false;
}
function rateScoreChange(val) {
  if (val) localActiveData.value["show-text"] = false;
}
</script>

<style lang="less" scoped>
:deep(.center-tabs .el-tabs__item) {
  width: 50% !important;
}
:deep(.el-tabs__nav) {
  width: 100%;
}
.right-board {
  width: 350px;
  position: absolute;
  right: 0;
  top: 0;
  padding-top: 3px;
  .field-box {
    position: relative;
    height: 430px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .ElScrollbar {
    height: 100%;
  }
}
.select-item {
  display: flex;
  border: 1px dashed #fff;
  box-sizing: border-box;
  & .close-btn {
    cursor: pointer;
    color: #f56c6c;
  }
  & .ElInput + .ElInput {
    margin-left: 4px;
  }
}
.select-item + .select-item {
  margin-top: 4px;
}
.select-item.sortable-chosen {
  border: 1px dashed #409eff;
}
.select-line-icon {
  line-height: 32px;
  font-size: 22px;
  padding: 0 4px;
  color: #777;
}
.option-drag {
  cursor: move;
}
.time-range {
  .el-date-editor {
    width: 227px;
  }
  :deep(.el-icon-time) {
    display: none;
  }
}
.document-link {
  position: absolute;
  display: block;
  width: 26px;
  height: 26px;
  top: 0;
  left: 0;
  cursor: pointer;
  background: #409eff;
  z-index: 1;
  border-radius: 0 0 6px 0;
  text-align: center;
  line-height: 26px;
  color: #fff;
  font-size: 18px;
}
.node-label {
  font-size: 14px;
}
.node-icon {
  color: #bebfc3;
}
</style>
